<template>
	<div class="index">
		<vue-header></vue-header>
		<div class="section">
			<mt-swipe :auto="4500">
				<mt-swipe-item v-for="item in portalAdvListDataList">
					<img :src="item.advListPicurl" width="100%" height="100%">
				</mt-swipe-item>
			</mt-swipe>
		</div>
		<div class="nav">
			<div class="nav1">
				<div class="navDiv" @click="vfun_goodslist">
					<em class="iconfont">&#xe607;</em>
				</div>
				<span>促销商品</span>
			</div>
			<div class="nav2">
				<div class="navDiv">
					<em class="iconfont" @click="vfun_goods('00100000095')">&#xe63f;</em>
				</div>
				<span @click="vfun_goods('00100000095')">新品上架</span>
			</div>
			<div class="nav3">
				<div class="navDiv">
					<em class="iconfont" @click="vfun_goods('00100000096')">&#xe627;</em>
				</div>
				<span @click="vfun_goods('00100000096')">热卖推荐</span>
			</div>
			<div class="nav4">
				<div class="navDiv">
					<em class="iconfont" @click="vfun_goods('00100000097')">&#xe63a;</em>
				</div>
				<span @click="vfun_goods('00100000097')">清仓优惠</span>
			</div>
		</div>
		<div style="padding-bottom: 1.5rem;margin-top: 0.4rem;">
			<div class="contImg">
				<span class="tuijian">新品上架</span>
				<div class="laning" v-if="vue_landing">
					<img src="../../assets/img/landing.gif" />
				</div>
				<div class="" v-else v-for="(item,index) in newSaleGoodsDataList" @click="vfun_go(index,newSaleGoodsDataList)">
					<img :src="item.goodsBigPic" v-if="newSaleGoodsDataList[index].goodsBigPic!=''" />
					<img src="../../../static/noImg.png" v-else>
					<p>{{item.goodsName}}</p>
					<span>￥{{Public.formatMoney(item.goodsSalePrice,2)}}</span>
				</div>
			</div>
			<div class="contImg">
				<span class="tuijian">热卖推荐</span>
				<div class="laning" v-if="vue_landing2">
					<img src="../../assets/img/landing.gif" />
				</div>
				<div class="" v-else v-for="(item,index) in hotSaleGoodsDataList" @click="vfun_go(index,hotSaleGoodsDataList)">
					<img :src="item.goodsBigPic" v-if="hotSaleGoodsDataList[index].goodsBigPic!=''" />
					<img src="../../../static/noImg.png" v-else>
					<p>{{item.goodsName}}</p>
					<span>￥{{Public.formatMoney(item.goodsSalePrice,2)}}</span>
				</div>
			</div>
			<div class="contImg">
				<span class="tuijian">清仓优惠</span>
				<div class="laning" v-if="vue_landing3">
					<img src="../../assets/img/landing.gif" />
				</div>
				<div class="" v-else v-for="(item,index) in cheapSaleGoodsDataList" @click="vfun_go(index,cheapSaleGoodsDataList)">
					<img :src="item.goodsBigPic" v-if="cheapSaleGoodsDataList[index].goodsBigPic!=''" />
					<img src="../../../static/noImg.png" v-else>
					<p>{{item.goodsName}}</p>
					<span>￥{{Public.formatMoney(item.goodsSalePrice,2)}}</span>
				</div>
			</div>
		</div>

		<vue-footer></vue-footer>
	</div>
</template>

<script>
	import vueHeader from '../../components/header/header'
	import vueFooter from '../../components/footer/footer'
	export default {
		components: {
			vueHeader,
			vueFooter
		},
		name: 'index',
		data() {
			return {
				vue_landing: true,
				vue_landing3: true,
				vue_landing2: true,
				newSaleGoodsDataList: [],
				hotSaleGoodsDataList: [],
				cheapSaleGoodsDataList: [],
				portalAdvListDataList: [],
				SaleGoodsSet: {
					"list": '',
				},
			}
		},

		methods: {
			loadMore() { //鼠标到达底部刷新
				//		  this.loading = true;
				//		  setTimeout(() => {
				//		    let last = this.SaleGoodsSet[0].list[this.SaleGoodsSet[0].list.length - 1];
				//		    for (let i = 1; i <= 5; i++) {
				//		      this.SaleGoodsSet[0].list.push(last + i);
				//		    }
				//		    this.loading = false;
				//		  }, 2500);
			},
			vfun_go(index, obj) {
				localStorage.setItem("goodsCode", obj[index].goodsCode);
				this.$router.push({path:"/goodsDetails"})

			},
			vfun_goodslist() {
				this.$router.push({path:"/goodsList"})
				localStorage.setItem("goodsTags", '000');
				localStorage.removeItem("vue_guanjin");
			},
			vfun_goods(goodsTags) {
				if(goodsTags == '00100000095') {
					localStorage.setItem("goodsTags", '00100000095');
				}
				if(goodsTags == '00100000096') {
					localStorage.setItem("goodsTags", '00100000096');
				}
				if(goodsTags == '00100000097') {
					localStorage.setItem("goodsTags", '00100000097');
				}

				//		localStorage.setItem("goodsTags",goodsTags);
				localStorage.removeItem("vue_guanjin");
				this.$router.push({path:"/goodsList"})
			},
			queryByPage() {
				this.axios({
					method: 'GET',
					url: "/v3/portal/pages/appIndex",
					data: {}
				}).then((res) => {
					this.portalAdvListDataList = res.data.portalAdvListDataList;
					localStorage.setItem("companyAbbreviate", res.data.memberCompanyData.companyAbbreviate);
				}).catch((err) => {});
				this.axios({
					method: 'POST',
					url: "/v3/sale/goodss/cheapSaleGoodsList",
					data: {}
				}).then((res) => {
					this.cheapSaleGoodsDataList = res.data.list;
					this.vue_landing3 = false;
				}).catch((err) => {});
				this.axios({
					method: 'POST',
					url: "/v3/sale/goodss/hotSaleGoodsList",
					data: {}
				}).then((res) => {
					this.hotSaleGoodsDataList = res.data.list;
					this.vue_landing2 = false;
				}).catch((err) => {});
				this.axios({
					method: 'POST',
					url: "/v3/sale/goodss/newSaleGoodsList",
					data: {}
				}).then((res) => {
					this.newSaleGoodsDataList = res.data.list;
					this.vue_landing = false;
				}).catch((err) => {});
			},
		},
		mounted() {
		},
		activated() {
			this.queryByPage();
			document.querySelector('#vue_id_title').innerHTML="云商";
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	h1,
	h2 {
		font-weight: normal;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	.index {
		box-sizing: border-box;
	}

	.section {
		height: 5rem;
		margin-top: 1rem;
	}

	.nav {
		display: -webkit-box;
		width: 100%;
		margin: 0 auto;
		padding: 0.3rem 0;
		background: #f5f5f5;
	}

	.nav div {
		-webkit-box-flex: 1;
		-moz-box-flex: 1;
		text-align: center;
		font-size: 14px;
	}

	.nav1 div {
		background: #ff4081;
	}

	.nav2 div {
		background: #d63a7c;
	}

	.nav3 div {
		background: #2ac427;
	}

	.nav4 div {
		background: #47587d;
	}

	.navDiv {
		height: 1.20rem;
		width: 1.20rem;
		text-align: center;
		line-height: 1.2rem;
		margin: 0 auto;
		border-radius: 0.3rem;
		margin-bottom: 0.10rem;
	}

	.navDiv em {
		font-size: 30px;
		color: #fff;
	}

	.contImg {
		background: #fff;
		overflow: hidden;
	}

	.contImg>div {
		width: 50%;
		float: left;
		padding: 3%;
		box-sizing: border-box;
		position: relative;
		font-size: 14px;
		color: #6e6e6e;
	}

	.contImg>span {
		display: block;
		text-indent: 3%;
		clear: both;
		/*margin-top: 0.3rem;*/
	}

	.contImg>div img {
		width: 100%;
		height: 4rem;
	}

	.tuijian {
		font-size: 16px;
		/*margin-top: 0.5rem;*/
		font-weight: bold;
		/*background: #b0b0b0;*/
		background: url(../../assets/img/floor-tit.png);
		background-size: 100% 100%;
		text-align: center;
		padding: 0.2rem 0;
	}

	.contImg>div span {
		color: #f10828;
		display: block;
	}

	.contImg>div p {
		display: block;
		/*width: 50%;*/
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.laning {
		padding: 2rem 0!important;
		margin: 0 auto;
		width: 100%!important;
		text-align: center;
	}

	.laning img {
		margin: 0 auto;
		width: 1.2rem!important;
		height: 1.2rem!important;
	}
</style>
